<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
    <div>
      <van-search
        v-model="sv"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <van-grid :column-num="5">
      <van-grid-item v-for="type in BTlist" :key="type.id" :icon="type.pic" :text="type.tname" @click="findByType(type.id)"/>
    </van-grid>
    <div>
      <van-swipe :autoplay="2000" width="360px" height="150px" style="text-align: center">
        <van-swipe-item v-for="(image, index) in images" :key="index" >
          <img v-lazy="image" style="height: 150px;width: 360px"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-dropdown-menu>

      <van-dropdown-item v-model="add" :title="add.name" ref="item">
        <van-cell>
          <van-radio-group v-model="radio" @change="addressChange">
            <van-radio v-for="a in address" :name="a.id" :key="a.id">{{a.name}}</van-radio>
          </van-radio-group>
        <div style="padding: 5px 16px;">
          <van-button type="danger" block round @click="onConfirm()">
            确认
          </van-button>
        </div>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" @change="sort(value1)"/>
      <van-dropdown-item v-model="value2" :options="option2" @change="findByType(value2)"/>
    </van-dropdown-menu>
    <div>
      <van-notice-bar
        left-icon="volume-o"
        text="仅展示距您20km内的商家"
      />
      <van-card @click="toBusinessPage(shop.id)" v-for="shop in sList" :price="shop.price" :desc="shop.description" :title="shop.bname" :thumb="shop.pic1">
        <template #tags>
          <van-tag plain type="danger">营业时间:{{shop.startTime}}-{{shop.endTime}}</van-tag>
          <br>
          <van-tag plain type="danger">距你{{shop.distance}}km</van-tag>

        </template>
      </van-card>
      <van-divider>已经到底啦</van-divider>
    </div>
    <div style="margin-top: 50px">
      <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <!--<van-tabbar-item icon="search">标签</van-tabbar-item>-->
        <van-tabbar-item icon="friends-o" to="orderszhongxin">正在配送</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/center">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
    </van-pull-refresh>
  </div>

</template>

<script>
  import { Toast } from 'vant';
  import { Lazyload } from 'vant';
  import Vue from 'vue';
  import { PullRefresh } from 'vant';
  Vue.use(PullRefresh);
  Vue.use(Lazyload);
  import axios from "axios";
export default {
  name: 'HelloWorld',
  data() {
    return {
      sList:[],
      BTlist:[],
      list:[],
      sv:'',
      value: '',
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F69%2F29%2F2757b45c4dc284f.jpg%21r850%2Ffw%2F800&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618381205&t=2d9f1a2d25ef1241399dba4b85f5fdb7",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F26%2F955677fcb5db693.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618381647&t=c756563bdfb5e2d2ae197e36f8c5fe35",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F02%2F92%2F71%2F55289c4c4e8e0.jpg&refer=http%3A%2F%2Fpic.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618381725&t=d1f9fe83d55f0e943657252cdc7eb4a3",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic180.nipic.com%2Ffile%2F20180909%2F27134832_110736372033_2.jpg&refer=http%3A%2F%2Fpic180.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618382226&t=6ee006d2a36723dd19958905928bdaa7",
          ],
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: '综合排序', value: 0 },
        { text: '距离优先', value: 1 },
        { text: '销量优先', value: 2 },
        { text: '评分优先', value: 3 },
      ],
      option2: [
        { text: '全部品类', value: 0 },
        { text: '美食', value: 1 },
        { text: '甜品', value: 2 },
        { text: '超市便利', value: 3 },
        { text: '蔬菜水果', value: 4 },
        { text: '买药', value: 5 },
        { text: '饮品', value: 6 },
      ],
      phone:sessionStorage.getItem("phone"),
      radio: '1',
      address:[
        {id:1,name:"立人科技",phone:'123',x1:107.982679,y1:34.22408},
        {id:2,name:"南窑头",phone:'123',x1:108.886838,y1:34.225282}
      ],
      add:{id:1,name:"立人科技",phone:'123',x1:108.882679,y1:34.22408},
      tadd:{tid:'',x1:'',y1:'',sid:'',sv:''},
      count: 0,
      isLoading: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    findAll:function () {
      axios.post("http://localhost/take-out-shop/business/findAll",this.add).then(res=>{
        this.sList=res.data.data;
      })

    },
    findType:function () {
      axios.post("http://localhost/take-out-shop/btype/findType").then(res=>{
        this.BTlist=res.data.data;
      })
    },onSearch:function () {
      this.tadd.sv=this.sv;
      this.tadd.x1=this.add.x1;
      this.tadd.y1=this.add.y1;
      axios.post("http://localhost/take-out-shop/business/search",this.tadd).then(res=>{
        this.list=res.data.data;
        this.$router.push({
          path: "/SearchPage",
          query: {
            list: this.list,
            sv:this.sv
          }
        });
      })

    }
    ,findByType:function (tid) {
      this.value2=tid;
      console.log(tid)
      this.tadd.sid=this.value1;
      this.tadd.x1=this.add.x1;
      this.tadd.y1=this.add.y1;
      this.tadd.tid=tid;
      axios.post("http://localhost/take-out-shop/business/bsort",this.tadd).then(res=>{
        this.sList=res.data.data;
      })
    },sort:function (sid) {
      this.value1=sid;
      this.tadd.x1=this.add.x1;
      this.tadd.y1=this.add.y1;
      this.tadd.tid=this.value2;
      this.tadd.sid=sid;
    console.log(sid)
    axios.post("http://localhost/take-out-shop/business/bsort",this.tadd).then(res=>{
      this.sList=res.data.data;
    })
  },
    onConfirm:function () {
      this.$refs.item.toggle();
      axios.post("http://localhost/take-out-shop/business/caculate",this.add).then(res=>{
        this.sList=res.data.data;
        console.log(this.sList)
      })
    },
    addressChange:function () {
      this.value1=0;
      this.value2=0;
      var id = this.radio-1;
      this.add = this.address[id];
      console.log(this.radio)
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    toBusinessPage:function(id) {
      sessionStorage.setItem("bid",id);
      this.$router.push({
        path: "/BusinessPage",
        query: {
          id: id
        }
      });
    }
  },
  mounted() {
    this.findAll();
    this.findType();
    if(this.phone!=null) {
      axios.post("api/user/findone", {phone: this.phone}).then(res => {
        if (res.data.code == 200) {
          this.name = res.data.data.userName;
          this.src = res.data.data.headPhoto;
          sessionStorage.setItem("userName", this.name);
          sessionStorage.setItem("id", res.data.data.id);
          console.log(this.name);
        }
      })
    }
  }
}
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: darkgrey;
  }


</style>
